<template>
  <div class="user-manager-container">
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="account" label="账号" width="180" />
      <el-table-column prop="nickname" label="昵称" width="180" />
      <el-table-column prop="roleName" label="角色" />
      <el-table-column prop="avatar" label="头像">
        <template #default="scope">
          <span v-if="scope.row.avatar">{{ scope.row.avatar }}</span>
          <span v-else>无头像</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除按钮 - 固定在表格正下方中间 -->
    <div class="delete-button-container" v-show="selectedRows.length > 0">
      <el-button type="danger" @click="handleDelete" class="delete-button">
        删除选中用户
      </el-button>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { onMounted, ref, inject, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listUser, deleteUser } from '@/js/ts_fetch'

// 表格数据
const tableData = ref([])

// 选中的行数据
const selectedRows = ref([])
// 注入刷新函数
const refreshUserTable = inject('refreshUserTable') as (() => void) | undefined

// 加载数据函数
const loadData = async () => {
  try {
    const res = await listUser()
    if (res.code === 200 && res.data) {
      tableData.value = res.data
      console.log('用户数据加载成功:', tableData.value)
    } else {
      console.error('接口返回数据格式错误:', res.data)
      tableData.value = []
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 设置刷新函数
if (refreshUserTable) {
  // 将实际的刷新函数赋值给父组件提供的引用
  (refreshUserTable as any).value = loadData
}

onMounted(() => {
    loadData()
})


// 组件卸载时清理
onUnmounted(() => {
  if (refreshUserTable) {
    (refreshUserTable as any).value = () => {}
  }
})

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 处理删除操作
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要删除的用户')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 个用户吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deleteUser(selectedRows.value.map(row => row.account))
    ElMessage.success('删除成功')
    // 重新加载数据
    const res = await listUser()
    if (res.code === 200 && res.data) {
      tableData.value = res.data
      selectedRows.value = [] // 清空选中状态
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}
</script>


<style scoped>
.user-manager-container {
  position: relative;
}

.delete-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 10px 0;
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid #ebeef5;
}

.delete-button {
  width: 150px;
  height: 40px;
  font-size: 14px;
}
</style>